<template>
  <a-layout>
    <a-layout-header>Header</a-layout-header>
    <a-layout-content>
      <a-select default-value="lucy" style="width: 120px">
        <a-select-option value="jack">
            Jack
        </a-select-option>
        <a-select-option value="lucy">
            Lucy
        </a-select-option>
        <a-select-option value="disabled" disabled>
            Disabled
        </a-select-option>
        <a-select-option value="Yiminghe">
            yiminghe
        </a-select-option>
      </a-select>
      <div>
        <a-button type="primary" @click="()=> {this.visible = true;}">
          Open Modal
        </a-button>
        <a-modal v-model="visible" title="Basic Modal" @ok="()=> { this.visible = true;}">
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </a-modal>
      </div>
      <a-button-group style="margin-right:10px">
      <a-button>Cancel</a-button>
      <a-button type="primary">OK</a-button>
      </a-button-group>
      <a-button type="primary">张三</a-button>
      <a-pagination :default-current="6" :total="500" />
      <a-steps :current="1">
        <a-step>
          <!-- <span slot="title">Finished</span> -->
          <template slot="title">
            Finished
          </template>
          <span slot="description">This is a description.</span>
        </a-step>
        <a-step title="In Progress" sub-title="Left 00:00:08" description="This is a description." />
        <a-step title="Waiting" description="This is a description." />
      </a-steps>
      <a-cascader :options="options" placeholder="Please select" />
      <a-checkbox-group >
        <a-row>
          <a-col :span="8">
            <a-checkbox value="A">
              A
            </a-checkbox>
          </a-col>
          <a-col :span="8">
            <a-checkbox value="B">
              B
            </a-checkbox>
          </a-col>
          <a-col :span="8">
            <a-checkbox value="C">
              C
            </a-checkbox>
          </a-col>
          <a-col :span="8">
            <a-checkbox value="D">
              D
            </a-checkbox>
          </a-col>
          <a-col :span="8">
            <a-checkbox value="E">
              E
            </a-checkbox>
          </a-col>
        </a-row>
      </a-checkbox-group>
      <a-range-picker />
      <a-form  :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="Note">
          <a-input
            v-decorator="['note', { rules: [{ required: true, message: 'Please input your note!' }] }]"
          />
        </a-form-item>
        <a-form-item label="Gender">
          <a-select
            v-decorator="[
              'gender',
              { rules: [{ required: true, message: 'Please select your gender!' }] },
            ]"
            placeholder="Select a option and change input text above"
          >
            <a-select-option value="male">
              male
            </a-select-option>
            <a-select-option value="female">
              female
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" html-type="submit">
            Submit
          </a-button>
        </a-form-item>
      </a-form>
       <a-input-number
        :default-value="1000"
        :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
        :parser="value => value.replace(/\$\s?|(,*)/g, '')"
      />
      <a-radio-group v-model="value">
        <a-radio-button value="a">
          Hangzhou
        </a-radio-button>
        <a-radio-button value="b">
          Shanghai
        </a-radio-button>
        <a-radio-button value="c">
          Beijing
        </a-radio-button>
        <a-radio-button value="d">
          Chengdu
        </a-radio-button>
      </a-radio-group>
      <a-rate :default-value="2.5" allow-half />
      <a-slider range :default-value="[20, 50]" />
      <a-switch default-checked />
      <a-time-picker use12-hours format="h:mm:ss A"  />
      <a-tree-select
        show-search
        style="width: 100%"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        placeholder="Please select"
        allow-clear
        tree-default-expand-all
      >
      <a-tree-select-node key="0-1" value="parent 1" title="parent 1">
        <a-tree-select-node key="0-1-1" value="parent 1-0" title="parent 1-0">
          <a-tree-select-node key="random"  value="leaf1" title="my leaf" />
          <a-tree-select-node key="random1" value="leaf2" title="your leaf" />
        </a-tree-select-node>
        <a-tree-select-node key="random2" value="parent 1-1" title="parent 1-1">
          <a-tree-select-node key="random3" value="sss">
            <b slot="title" style="color: #08c">sss</b>
          </a-tree-select-node>
        </a-tree-select-node>
      </a-tree-select-node>
    </a-tree-select>
    <a-upload
      name="avatar"
      list-type="picture-card"
      class="avatar-uploader"
      :show-upload-list="false"
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
    >
      <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
      <div v-else>
        <a-icon :type="loading ? 'loading' : 'plus'" />
        <div class="ant-upload-text">
          Upload
        </div>
      </div>
    </a-upload>
    <a-collapse v-model="activeKey">
      <a-collapse-panel key="1" header="This is panel header 1">
        <p>{{ text }}</p>
      </a-collapse-panel>
      <a-collapse-panel key="2" header="This is panel header 2" :disabled="false">
        <p>{{ text }}</p>
      </a-collapse-panel>
      <a-collapse-panel key="3" header="This is panel header 3" disabled>
        <p>{{ text }}</p>
      </a-collapse-panel>
    </a-collapse>
    <a-table :columns="columns" :data-source="data">
      <a slot="name" slot-scope="text">{{ text }}</a>
      <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
      <span slot="tags" slot-scope="tags">
        <a-tag
          v-for="tag in tags"
          :key="tag"
          :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
        >
          {{ tag.toUpperCase() }}
        </a-tag>
      </span>
      <span slot="action" slot-scope="text, record">
        <a>Invite 一 {{ record.name }}</a>
        <a-divider type="vertical" />
        <a>Delete</a>
        <a-divider type="vertical" />
        <a class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>
      </span>
    </a-table>
    <a-button type="primary" @click="()=> {this.$message.info('This is a normal message');}">
      Display normal message
    </a-button>
    <a-popconfirm placement="top" ok-text="Yes" cancel-text="No">
      <template slot="title">
        <p>文字</p>
        <p>咋说的功夫如何发的风格而非个人粉底乳</p>
      </template>
      <a-button>Top</a-button>
    </a-popconfirm>
    <a-timeline>
      <a-timeline-item color="green">
        Create a services site 2015-09-01
      </a-timeline-item>
      <a-timeline-item color="green">
        Create a services site 2015-09-01
      </a-timeline-item>
      <a-timeline-item color="red">
        <p>Solve initial network problems 1</p>
        <p>Solve initial network problems 2</p>
        <p>Solve initial network problems 3 2015-09-01</p>
      </a-timeline-item>
      <a-timeline-item>
        <p>Technical testing 1</p>
        <p>Technical testing 2</p>
        <p>Technical testing 3 2015-09-01</p>
      </a-timeline-item>
      <a-timeline-item color="gray">
        <p>Technical testing 1</p>
        <p>Technical testing 2</p>
        <p>Technical testing 3 2015-09-01</p>
      </a-timeline-item>
      <a-timeline-item color="gray">
        <p>Technical testing 1</p>
        <p>Technical testing 2</p>
        <p>Technical testing 3 2015-09-01</p>
      </a-timeline-item>
    </a-timeline>
      <a-statistic title="Active Users" :value="112893" style="margin-right: 50px" />
      <a-statistic title="Account Balance (CNY)" :precision="2" :value="112893" />
    </a-layout-content>
    <a-layout-footer>Footer</a-layout-footer>
    <div class="aaa"></div>
    <div class="title">.title</div>
    <Echarts :option="option" class="chart" />
  </a-layout>
    
</template>
<script>
import Echarts from "@/components/common/Echarts";

const columns = [
  {
    dataIndex: "name",
    key: "name",
    slots: { title: "customTitle" },
    sorter: true,
    scopedSlots: { customRender: "name" },
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address",
  },
  {
    title: "Tags",
    key: "tags",
    dataIndex: "tags",
    scopedSlots: { customRender: "tags" },
  },
  {
    title: "Action",
    key: "action",
    scopedSlots: { customRender: "action" },
  },
];

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    tags: ["nice", "developer"],
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    tags: ["loser"],
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
];
export default {
  data() {
    return {
      options: [
        {
          value: "zhejiang",
          label: "Zhejiang",
          children: [
            {
              value: "hangzhou",
              label: "Hangzhou",
              children: [
                {
                  value: "xihu",
                  label: "West Lake",
                },
              ],
            },
          ],
        },
        {
          value: "jiangsu",
          label: "Jiangsu",
          children: [
            {
              value: "nanjing",
              label: "Nanjing",
              children: [
                {
                  value: "zhonghuamen",
                  label: "Zhong Hua Men",
                },
              ],
            },
          ],
        },
      ],
      data,
      columns,
      value: "",
      imageUrl: "",
      loading: "",
      activeKey: 1,
      text: "",
      visible: false,
      option: {
          title: {
            text: "ECharts 入门示例"
          },
          tooltip: {},
          legend: {
            data:["销量"]
          },
          xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          yAxis: {},
          series: [{
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }]
        }
    };
  },
  methods: {
    handleChange() {

    },
  },
  mounted() {

  },
  computed: {

  },
  components: {
    Echarts
  },
};
</script>

<style scoped lang="less" >
  .title {
    color: @primary-color;
  }
  .chart {
    width: 600px;
    height: 400px;
  }
</style>
